import { formEdit, formTabList } from "@/services/formInteraction";
import { Modal, Select, message } from "antd";
import React from "react";

class MoveCategory extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      categoryList:[],
      categoryId:""
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initModal = () => {
    this.setState({
      visible:true,
      categoryId:this.props.categoryId
    },() => {
      this.getCategoryList()
    })
  }

  getCategoryList = async () => {
    const { rootCategoryId } = this.props;
    const res = await formTabList({categoryId:rootCategoryId})
    this.setState({
      categoryList:res
    })
  }

  doCancel = () => {
    this.setState({
      visible:false
    })
  }

  doOk = async () => {
    const { name,formId } = this.props
    const { categoryId } = this.state;
    const res = await formEdit({
      name:name,
      id:formId,
      categoryId
    })
    message.info(res.message)
    this.props.getInfo()
    this.doCancel()
  }

  changeCategoryId = value => {
    this.setState({
      categoryId:value
    })
  }

  render(){
    const { visible,categoryList,categoryId } = this.state;
    return (
      <Modal
        visible={visible}
        onCancel={this.doCancel}
        onOk={this.doOk}
        title='移动分类'
      >
        <Select style={{width:300}} value={categoryId} onChange={this.changeCategoryId}>
          {
            categoryList.map(item => {
              return <Select.Option value={item.id}>{item.name}</Select.Option>
            })
          }
        </Select>
      </Modal>
    )
  }
}

export default MoveCategory